<template>
  <form class="space-y-6" @submit.prevent="$emit('submit')">
    <!-- 错误信息 -->
    <AlertMessage 
      v-if="error" 
      type="error" 
      :message="error"
    >
      <!-- 邮箱未确认时的特殊处理 -->
      <div v-if="isEmailNotConfirmed" class="mt-2">
        <p class="text-xs text-error/80 mb-2">您的邮箱尚未确认，请检查邮箱并点击确认链接。</p>
        <UiButton
          type="button"
          @click="$emit('resend-confirmation')"
          :disabled="resendLoading"
          variant="outline"
          size="sm"
          class="text-xs"
        >
          {{ resendLoading ? '发送中...' : '重新发送确认邮件' }}
        </UiButton>
      </div>
    </AlertMessage>

    <!-- 成功信息 -->
    <AlertMessage 
      v-if="successMessage" 
      type="success" 
      :message="successMessage" 
    />

    <!-- 表单字段 -->
    <slot />

    <!-- 主按钮 -->
    <UiButton
      type="submit"
      variant="primary"
      size="lg"
      :loading="loading"
      :loading-text="loadingText"
      full-width
    >
      {{ buttonText }}
    </UiButton>

    <!-- 分割线 -->
    <div class="relative my-6">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-background-600"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-background-900 text-text-muted">或</span>
      </div>
    </div>

    <!-- Google按钮 -->
    <GoogleButton 
      :text="googleButtonText" 
      :disabled="loading"
      @click="$emit('google-auth')"
    />

    <!-- 底部链接 -->
    <div class="mt-6 text-center">
      <p class="text-text-muted">
        {{ bottomText }}
        <UiButton 
          v-if="bottomLink === '#'"
          @click="$emit('switch-mode')"
          variant="ghost"
          size="sm"
          class="text-primary-400 hover:text-primary-300 p-0 h-auto"
        >
          {{ bottomLinkText }}
        </UiButton>
        <router-link 
          v-else
          :to="bottomLink" 
          class="text-primary-400 hover:text-primary-300 transition-colors duration-normal"
        >
          {{ bottomLinkText }}
        </router-link>
      </p>
    </div>
  </form>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import AlertMessage from './AlertMessage.vue'
import GoogleButton from './GoogleButton.vue'
import { UiButton } from '../ui'

const props = withDefaults(defineProps<{
  error?: string
  successMessage?: string
  loading?: boolean
  resendLoading?: boolean
  buttonText: string
  loadingText?: string
  googleButtonText: string
  bottomText: string
  bottomLink: string
  bottomLinkText: string
}>(), {
  loading: false,
  resendLoading: false,
  loadingText: '处理中...'
})

defineEmits<{
  submit: []
  'google-auth': []
  'resend-confirmation': []
  'switch-mode': []
}>()

// 检查是否是邮箱未确认错误
const isEmailNotConfirmed = computed(() => {
  return props.error?.toLowerCase().includes('email not confirmed') || 
         props.error?.toLowerCase().includes('邮箱未确认')
})
</script> 